<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  width: {
    type: Number,
    default: 927
  },
  height: {
    type: Number,
    default: 360
  },
  data: {
    type: Array,
    default: () => []
  }
})
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c0 = [shape.x, shape.y]
    const c1 = [shape.x - 9, shape.y - 9]
    const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
    const c3 = [xAxisPoint[0], xAxisPoint[1]]
    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
  }
})

// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c1 = [shape.x, shape.y]
    const c2 = [xAxisPoint[0], xAxisPoint[1]]
    const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 6]
    const c4 = [shape.x + 13, shape.y - 6]
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
  }
})

// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const c1 = [shape.x, shape.y]
    const c2 = [shape.x + 13, shape.y - 6]
    const c3 = [shape.x + 4, shape.y - 15]
    const c4 = [shape.x - 9, shape.y - 9]
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
  }
})
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)

// 最大值数据（仅作为背景参考，不再限制实际数据）
const MAX = [50, 50, 50, 50, 50]
// 第一组数据（底部）
const VALUE1 = props.data[1]
// 第二组数据（顶部）- 部分数据与第一组叠加后将超过MAX值
const VALUE2 = props.data[2]
// 计算两组数据总和（用于动态调整Y轴范围）
const TOTAL = VALUE1.map((v, i) => v + VALUE2[i])
// 动态计算Y轴最大值（取总和的最大值，确保所有数据都能显示）
const Y_AXIS_UNIT = '吨'
const option = {
  backgroundColor: 'transparent',
  legend: {
    tooltip: {
      show: true
    },
    // legend 必须和 data那里对应
    data: ['储备粮', '贸易粮'],
    top: '0%',
    right: '8%',
    icon: 'circle',
    itemWidth: 11, // 可单独设置图例列表中图标的宽度:cite[1]:cite[4]
    itemHeight: 11, // 可单独设置图例列表中图标的高度:cite[1]:cite[4]
    textStyle: {
      color: '#fff',
      fontSize: '16rem'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      // 显示两组数据
      return params[0].name + '<br/>' + params[1].marker + ' 储备粮: ' + params[1].value + '<br/>' + params[2].marker + ' 贸易粮: ' + params[2].value
    }
  },
  graphic: [
    {
      type: 'text', // 类型：文本
      style: {
        text: '单位：' + Y_AXIS_UNIT, // 单位内容：吨
        fontSize: '16rem', // 与Y轴刻度文字大小一致（适配rem）
        fill: 'rgba(0, 209, 229, 1)', // 与Y轴文字颜色一致
        fontFamily: 'dt' // 与Y轴字体一致
      }
    }
  ],
  grid: {
    left: 0,
    right: '10rem',
    bottom: '0rem',
    top: '30rem',
    // grid内是否包含 label 如果true 容易label截断 bottom值不足的情况时
    containLabel: false
  },
  xAxis: {
    type: 'category',
    data: props.data[0],
    axisLine: {
      show: false,
      lineStyle: {
        color: 'white'
      }
    },
    offset: 5, // 距离坐标轴距离
    axisTick: {
      show: false,
      length: 9,
      alignWithLabel: true,
      lineStyle: {
        color: '#7DFFFD'
      }
    },
    axisLabel: {
      show: true,
      fontSize: '16rem',
      fontFamily: 'sr',
      color: 'rgba(0, 209, 229, 1)'
    }
  },
  yAxis: {
    min: 0,
    max: 50, // 使用动态计算的最大值
    type: 'value',
    axisLine: {
      show: false,
      lineStyle: {
        color: 'white'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      fontFamily: 'dt',
      color: 'rgba(0, 209, 229, 1)',
      fontSize: '16rem'
    },
    boundaryGap: ['20%', '20%']
  },
  series: [
    // 背景参考柱（最大值）

    {
      type: 'custom',
      renderItem: function (params, api) {
        // 1. 先获取3D数据柱的中心基准点（与3D柱的shape.x完全一致）
        const centerX = api.coord([api.value(0), 0])[0]
        // 2. 关键：使用与3D柱完全相同的横向偏移量（左13px、右18px），确保宽度和位置对齐
        const leftOffset = 9 // 与CubeLeft的偏移量一致
        const rightOffset = 13 // 与CubeRight的偏移量一致
        // 3. 计算2D柱的左右边界（完全匹配3D柱的横向范围）
        const left = centerX - leftOffset // 左边界=中心-左偏移（和3D左面对齐）
        const right = centerX + rightOffset // 右边界=中心+右偏移（和3D右面对齐）
        // 4. 计算2D柱的上下边界（高度从x轴到MAX值）
        const yTop = api.coord([api.value(0), api.value(1)])[1] // 柱子顶部y坐标
        const yBottom = api.coord([api.value(0), 0])[1] // 柱子底部y坐标（x轴位置）

        // 5. 绘制2D矩形（完全覆盖3D柱的横向范围，实现精准对齐）
        return {
          type: 'rect',
          shape: {
            x: left, // 左边界（与3D左面对齐）
            y: yTop, // 上边界（MAX值高度）
            width: right - left, // 宽度=左偏移+右偏移（和3D柱总宽度一致）
            height: yBottom - yTop // 高度=底部-顶部（从x轴到MAX值）
          },
          style: {
            fill: 'rgba(0, 126, 255, .2)' // 保留原背景色
          }
        }
      },
      data: MAX
    },
    // {
    //   type: 'custom',
    //   renderItem: function (params, api) {
    //     const location = api.coord([api.value(0), api.value(1)])
    //     return {
    //       type: 'group',
    //       children: [
    //         {
    //           type: 'CubeLeft',
    //           shape: {
    //             api,
    //             x: location[0],
    //             y: location[1],
    //             xAxisPoint: api.coord([api.value(0), 0])
    //           },
    //           style: {
    //             fill: 'rgba(0, 126, 255, .2)'
    //           }
    //         },
    //         {
    //           type: 'CubeRight',
    //           shape: {
    //             api,
    //             x: location[0],
    //             y: location[1],
    //             xAxisPoint: api.coord([api.value(0), 0])
    //           },
    //           style: {
    //             fill: 'rgba(0, 126, 255, .2)'
    //           }
    //         },
    //         {
    //           type: 'CubeTop',
    //           shape: {
    //             api,
    //             x: location[0],
    //             y: location[1],
    //             xAxisPoint: api.coord([api.value(0), 0])
    //           },
    //           style: {
    //             fill: 'rgba(0, 126, 255, .2)'
    //           }
    //         }
    //       ]
    //     }
    //   },
    //   data: MAX
    // },
    // 第一组数据（底部）
    {
      type: 'custom',
      name: '储备粮',
      itemStyle: {
        // legend颜色单独设置 不会从renderItem中继承
        color: 'rgba(0, 126, 255, 1)' // 与渐变主色一致（蓝色），用于图例显示
      },
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)])
        // 第一组数据使用蓝色渐变
        const color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(8, 53, 122, 1)'
          },
          {
            offset: 0.9,
            color: 'rgba(55, 178, 244, 1)'
          }
        ])
        return {
          type: 'group',
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: color
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: color
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: color
              }
            }
          ]
        }
      },
      data: VALUE1
    },
    // 第二组数据（顶部）
    {
      type: 'line',
      name: '贸易粮',
      itemStyle: {
        color: 'rgba(251, 179, 8, 1)'
      },
      symbol: 'none',
      smooth: true,
      data: VALUE2, // 纵坐标数据
      lineStyle: {
        width: 2,
        color: 'rgba(251, 179, 8, 1)'
      }
    }
  ]
}

const echart = ref()

onMounted(() => {
  console.log(echart.value)
  const e = echarts.init(echart.value)
  e.setOption(option)
})
</script>

<template>
  <div
    ref="echart"
    :style="{
      width: width + 'rem',
      height: height + 'rem'
    }"
  ></div>
</template>
